<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<title>Vue计算属性示例</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			.container {
				margin: 20px;
				font-family: Arial, sans-serif;
			}

			.result {
				margin-top: 20px;
				font-weight: bold;
				color: #333;
			}

			input {
				margin: 5px;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="container">
			<h2>计算属性简单演示</h2>

			<div>
				<label>第一个数字：</label>
				<input type="number" v-model.number="num1">
			</div>
			<div>
				<label>第二个数字：</label>
				<input type="number" v-model.number="num2">
			</div>

			<div class="result">
				<p>两数之和：{{ sum }}</p>
			</div>
		</div>

		<script>
			const {
				createApp
			} = Vue

			createApp({
				data() {
					return {
						num1: 0,
						num2: 0
					}
				},
				computed: {
					sum() {
						return this.num1 + this.num2
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>